<template>
  <div class="box flex-row-between" :class="type === 'small' ? 'small' : 'big'">
    <div class="box-title flex-row-start">
      <img class="box-title-img" :src="icon" alt="" />
      <span class="box-title-text">{{ title }}</span>
    </div>
    <p v-if="showMore" class="box-more" @click="handleClick">更多</p>
  </div>
</template>

<script lang="ts" setup>
withDefaults(
  defineProps<{
    title: string
    type?: 'small' | 'big'
    showMore?: boolean
    icon?: any
  }>(),
  {
    title: '',
    type: 'small',
    showMore: false,
  },
)

const emit = defineEmits(['click'])

function handleClick() {
  emit('click')
}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  width: 100%;
  height: vh(36);
  font-size: vw(20);
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(43, 52, 62, 1);

  &::after {
    content: '';
    position: absolute;
    bottom: vh(-5);
    left: 0;
    width: vw(170);
    border: 3px solid;
    box-sizing: border-box;
    border-image: linear-gradient(
        90deg,
        rgba(42, 89, 209, 0) 0%,
        rgba(42, 89, 209, 1) 49.99%,
        rgba(42, 89, 209, 0) 100%
      )
      3;
    filter: blur(2px);
    animation: translate 3s linear infinite;
  }

  @keyframes translate {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%);
    }
  }

  &-title {
    &-img {
      width: vw(36);
      margin-right: vw(8);
    }
  }

  &-more {
    font-size: vw(14);
    cursor: pointer;
    color: var(--big-screent-hover-color);

    &:hover {
      color: #fff;
    }
  }
}
</style>
